<script setup>
  import { ref, watch,defineEmits } from 'vue';
  import axios from 'axios'; // 确保你已正确配置 axios

  // ------------------------- 显示详情弹窗 -----------------------------
  // 父传子：获取书籍id和是否显示
  const props = defineProps({
    dialogVisible: Boolean,
    bookId: Number
  });
  const dialogVisibleInner = ref(false);
  const book = ref({});
  // 监听 props 的变化
  watch(() => props.dialogVisible, (newVal) => {
    console.log("newVal",newVal)
    if (newVal) {
      findById();
    }
  });
  // 获取书籍详细信息
  function findById() {
    axios.get(`/book/findById/${props.bookId}`).then(resp => {
      book.value = resp.data;
      dialogVisibleInner.value = true;
    });
  }
  // ------------------------- 关闭详情弹窗 -----------------------------
  // 子传父
  const emit = defineEmits();
  // 关闭对话框
  function handlerClose() {
    dialogVisibleInner.value = false;
    // 告诉父组件，当前子组件关闭了
    emit('close', false);
  }
</script>
<template>
  <!-- 查看详情对话框，打开对话框调用方法 -->
  <el-dialog v-model="dialogVisibleInner" title="书籍详情" @close="handlerClose">
    <div class="dialog-content">
      <div class="book-image">
        <img :src="$urlImage + book.imgSrc" alt="书籍详情">
      </div>
      <div class="book-info">
        <h2 class="title">《{{ book.name }}》</h2>
        <p class="author">作者：{{ book.author }}</p>
        <p class="publisher">出版社：{{ book.publisher }}</p>
        <p class="price">价格：&yen;{{ book.price }}</p>
        <el-divider></el-divider>
        <p class="intro">{{ book.detail }}</p>
        <div class="button-group">
          <el-button type="warning" size="medium" icon="el-icon-shopping-cart-full">加入购物车</el-button>
          <el-button type="primary" size="medium" @click="handlerClose" icon="el-icon-circle-close">关闭</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped>
  .dialog-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .book-image {
    width: 30%;
    text-align: center;
  }
  .book-image img {
    max-width: 100%;
    height: auto;
  }
  .book-info {
    width: 68%;
  }
  .title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 6px;
  }
  .author {
    font-size: 18px;
    margin: 0 0 4px;
  }
  .publisher,
  .price {
    font-size: 16px;
    margin: 0 0 2px;
  }
  .intro {
    font-size: 14px;
    margin: 0 0 10px;
  }
  .button-group {
    display: flex;
    justify-content: flex-end;
  }
</style>